<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { useFs } from '@fast-crud/fast-crud';

import { getValidateRulesByFs } from '#/api/common/validateByFs';
import { DefGenTableColumnConfig } from '#/api/devOperation/developer/defGenTableColumn';
import { ActionEnum } from '#/enums/commonEnum';

import { createCrudOptions, frontRules } from '../data/fieldCrud';

defineOptions({
  name: '代码生成字段',
  inheritAttrs: false,
});

const tableIdRef = ref();
const batch = ref<boolean>(false);
const { crudRef, crudBinding, crudExpose, appendCrudOptions } = useFs({
  createCrudOptions,
  context: { tableIdRef },
});

// 页面打开后获取列表数据
onMounted(async () => {
  const addFormOptions = await getValidateRulesByFs({
    Api: DefGenTableColumnConfig.Save,
    mode: ActionEnum.ADD,
    customRules: frontRules.addForm.rules,
    trigger: 'change',
  });
  const editFormOptions = await getValidateRulesByFs({
    Api: DefGenTableColumnConfig.Update,
    mode: ActionEnum.EDIT,
    customRules: frontRules.editForm.rules,
  });
  appendCrudOptions({ ...addFormOptions, ...editFormOptions });
});

const load = async (tableId: string) => {
  let tableIdList;
  if (tableId.includes(',')) {
    tableIdList = tableId.split(',');
    batch.value = true;
  } else {
    batch.value = false;
    tableIdList = [tableId];
  }
  tableIdRef.value = tableIdList[0];

  // crudExpose.setSearchFormData({ form: { tableId: tableIdList[0] } });
  crudExpose.doRefresh();
  // crudExpose.doSearch({ form: { tableId } });
};
defineExpose({ load });
</script>

<template>
  <div v-if="batch">
    批量操作暂不支持修改字段，如果确实需要个性化修改字典配置，请单个修改后在生成！
  </div>

  <div v-else style="height: 1000px">
    <FsCrud ref="crudRef" v-bind="crudBinding" />
  </div>
</template>
